//判断getData方法是第几次被执行
let flag = true;
//存放session中的值
let item;
$(function () {
    //获取被点击书本的id
    item = sessionStorage.getItem("bookPid");

    if(flag){
        getData(item)
    }else {
        console.log("第二次页面加载拒绝再次使用初始id查询")
    }
})

//查询传入id的周围几条数据
function getData(id) {
    $.ajax({
        url: 'http://localhost:8080/back/front/switch',
        data: {"id": id},
        dataType: 'json',
        async:false,//关闭异步
        success: function (res) {
            //存放应该传入的id值
            let  pid;
            // console.log("产品上下个返回的数据",res.data)
            for (let i = 0; i < res.data.length; i++) {
                // console.log("flag的值",flag)
                //第一次执行设置方法
                if(flag){
                    console.log("第一次设置数据")
                    if (res.data[i].id == item && flag) {
                        pid = res.data[i].id;
                        setBooksPrice(res.data[i])
                        setBooksInfo(res.data[i])
                    }

                }
                //第二次执行设置方法
                else if(res.data[i].id == id) {
                    console.log("第一次之后设置数据")
                    pid = res.data[i].id;
                    setBooksPrice(res.data[i])
                    setBooksInfo(res.data[i])
                }
            }

            //设置超链接样式
            setLink(res.data,pid);

        }
    })

}

//设置书本价格以及封面
function setBooksPrice(data) {
    $("#books-cover").html('<div>\n' +
        '                                    <img src="'+data.imgHref+'" alt="">\n' +
        // '                                    <img src="../img/dongcaikourou.jpg" alt="">\n' +
        '                                </div>\n' +
        '                                <div>\n' +
        '                                    <div>' + data.name + '</div>\n' +
        '                                    <div>\n' +
        '                                        <div>市场价：' + data.price + '</div>\n' +
        '                                        <div>\n' +
        '                                            <div>价格：</div>\n' +
        '                                            <div>' + data.normalPrice + '</div>\n' +
        '                                        </div>\n' +
        '                                    </div>\n' +
        '                                </div>')
}

//设置书本简介
function setBooksInfo(data) {
    $("#books-info").html('<div>' + data.name + '</div>\n' +
        '<div>\n' + data.description +'</div>')


}

//设置超链接
function setLink(arr,pid) {
    // console.log("超链接设置方法")
    //第一次调用该方法时，id值为session中的值
    if(flag){
        pid = item;
    }

    //第一次执行设置数据方法后将标志位设为false
    flag = false;

    //说明当前点击数据为查询第一条，无上一条
    if(arr[0].id == pid){
        $("#switch").html('<div>\n' +
            '                                    <div  disabled>\n' +
            '                                        <svg t="1644483482787" class="icon" viewBox="0 0 1024 1024" version="1.1"\n' +
            '                                             xmlns="http://www.w3.org/2000/svg" p-id="9144" width="10" height="10">\n' +
            '                                            <path d="M825.770667 441.728a21.333333 21.333333 0 0 1-30.208 0L533.333333 179.498667V896a21.333333 21.333333 0 0 1-42.666666 0V179.498667l-262.229334 262.229333a21.333333 21.333333 0 1 1-30.208-30.165333l298.666667-298.666667a21.333333 21.333333 0 0 1 30.208 0l298.666667 298.666667a21.333333 21.333333 0 0 1 0 30.165333z"\n' +
            '                                                  fill="#41416E" p-id="9145"></path>\n' +
            '                                        </svg>\n' +
            '                                        <span title="已经到头">已经到头</span>\n' +
            '                                    </div>\n' +
            '                                </div>\n' +
            '                                <div>\n' +
            '                                    <div  onclick="getData('+arr[arr.length-1].id+')">\n' +
            '                                        <svg t="1644483535049" class="icon" viewBox="0 0 1024 1024" version="1.1"\n' +
            '                                             xmlns="http://www.w3.org/2000/svg" p-id="9283" width="10" height="10">\n' +
            '                                            <path d="M825.770667 612.394667l-298.666667 298.666666a21.333333 21.333333 0 0 1-30.208 0l-298.666667-298.666666a21.333333 21.333333 0 0 1 30.208-30.165334l262.229334 262.272V128a21.333333 21.333333 0 0 1 42.666666 0v716.501333l262.229334-262.272a21.333333 21.333333 0 0 1 30.208 30.165334z"\n' +
            '                                                  fill="#41416E" p-id="9284"></path>\n' +
            '                                        </svg>\n' +
            '                                        <span title="'+arr[arr.length-1].name+'">下一个：'+arr[arr.length-1].name+'</span>\n' +
            '                                    </div>\n' +
            '                                </div>')
    }
    //说明当前点击数据为查询最后一条，无下一条
    else if(arr[arr.length-1].id == pid){
        $("#switch").html('<div>\n' +
            '                                    <div  onclick="getData('+arr[0].id+')">\n' +
            '                                        <svg t="1644483482787" class="icon" viewBox="0 0 1024 1024" version="1.1"\n' +
            '                                             xmlns="http://www.w3.org/2000/svg" p-id="9144" width="10" height="10">\n' +
            '                                            <path d="M825.770667 441.728a21.333333 21.333333 0 0 1-30.208 0L533.333333 179.498667V896a21.333333 21.333333 0 0 1-42.666666 0V179.498667l-262.229334 262.229333a21.333333 21.333333 0 1 1-30.208-30.165333l298.666667-298.666667a21.333333 21.333333 0 0 1 30.208 0l298.666667 298.666667a21.333333 21.333333 0 0 1 0 30.165333z"\n' +
            '                                                  fill="#41416E" p-id="9145"></path>\n' +
            '                                        </svg>\n' +
            '                                        <span title="'+arr[0].name+'">上一个：'+arr[0].name+'</span>\n' +
            '                                    </div>\n' +
            '                                </div>\n' +
            '                                <div>\n' +
            '                                    <div  disabled >\n' +
            '                                        <svg t="1644483535049" class="icon" viewBox="0 0 1024 1024" version="1.1"\n' +
            '                                             xmlns="http://www.w3.org/2000/svg" p-id="9283" width="10" height="10">\n' +
            '                                            <path d="M825.770667 612.394667l-298.666667 298.666666a21.333333 21.333333 0 0 1-30.208 0l-298.666667-298.666666a21.333333 21.333333 0 0 1 30.208-30.165334l262.229334 262.272V128a21.333333 21.333333 0 0 1 42.666666 0v716.501333l262.229334-262.272a21.333333 21.333333 0 0 1 30.208 30.165334z"\n' +
            '                                                  fill="#41416E" p-id="9284"></path>\n' +
            '                                        </svg>\n' +
            '                                        <span title="已经到底">已经到底</span>\n' +
            '                                    </div>\n' +
            '                                </div>')
    }
    //既有上一条也有下一条
    else{
        $("#switch").html('<div>\n' +
            '                                    <div  onclick="getData('+arr[0].id+')">\n' +
            '                                        <svg t="1644483482787" class="icon" viewBox="0 0 1024 1024" version="1.1"\n' +
            '                                             xmlns="http://www.w3.org/2000/svg" p-id="9144" width="10" height="10">\n' +
            '                                            <path d="M825.770667 441.728a21.333333 21.333333 0 0 1-30.208 0L533.333333 179.498667V896a21.333333 21.333333 0 0 1-42.666666 0V179.498667l-262.229334 262.229333a21.333333 21.333333 0 1 1-30.208-30.165333l298.666667-298.666667a21.333333 21.333333 0 0 1 30.208 0l298.666667 298.666667a21.333333 21.333333 0 0 1 0 30.165333z"\n' +
            '                                                  fill="#41416E" p-id="9145"></path>\n' +
            '                                        </svg>\n' +
            '                                        <span title="'+arr[0].name+'">上一个：'+arr[0].name+'</span>\n' +
            '                                    </div>\n' +
            '                                </div>\n' +
            '                                <div>\n' +
            '                                    <div  onclick="getData('+arr[arr.length-1].id+')">\n' +
            '                                        <svg t="1644483535049" class="icon" viewBox="0 0 1024 1024" version="1.1"\n' +
            '                                             xmlns="http://www.w3.org/2000/svg" p-id="9283" width="10" height="10">\n' +
            '                                            <path d="M825.770667 612.394667l-298.666667 298.666666a21.333333 21.333333 0 0 1-30.208 0l-298.666667-298.666666a21.333333 21.333333 0 0 1 30.208-30.165334l262.229334 262.272V128a21.333333 21.333333 0 0 1 42.666666 0v716.501333l262.229334-262.272a21.333333 21.333333 0 0 1 30.208 30.165334z"\n' +
            '                                                  fill="#41416E" p-id="9284"></path>\n' +
            '                                        </svg>\n' +
            '                                        <span title="'+arr[arr.length-1].name+'">下一个：'+arr[arr.length-1].name+'</span>\n' +
            '                                    </div>\n' +
            '                                </div>')
    }

}

